<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GBK 文件名 zip 转 UTF-8</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.29/dist/vue.global.js"></script>
    <script src="./wasm_exec.js"></script>
    <style type="text/css">
        header {
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 30px;
        }
    </style>
    <script>
        if (window.fetch == null || window.WebAssembly == null) {
            alert("请使用最新版本的 chrome 浏览器");
        }
    </script>
</head>



<body>
    <div id="app">
        <header>
            <nav class="container-fluid">
                <ul>
                    <li><strong>GBK 文件名 zip 转 UTF-8</strong></li>
                </ul>
                <ul>
                </ul>
            </nav>
        </header>
        <main class="container">
            <input type="file" ref="file" accept=".zip" @change="fileupload" v-if="!load">
            <p v-if="load">{{ load }}</p>
            <p v-if="errmsg" style="color: red;">{{ errmsg }}</p>
        </main>
    </div>
</body>

<script type="text/javascript">
    Vue.createApp({
        setup(props, context) {
            let go;
            try {
                go = new Go();
            } catch (error) {
                alert("请使用最新版本的 chrome 浏览器");
            }
            async function fetchAndInstantiate() {
                const response = await fetch("./ip.wasm");
                const buffer = await response.arrayBuffer();
                const obj = await WebAssembly.instantiate(buffer, go.importObject)
                go.run(obj.instance);
            }
            const file = Vue.ref(null);
            const load = Vue.ref("加载 wasm 中");
            const errmsg = Vue.ref("");

            (async () => {
                await fetchAndInstantiate();
                load.value = "";
            })()


            async function fileupload() {
                let f = file.value;
                errmsg.value = "";
                load.value = "转换中";
                let b = new Uint8Array(await f.files[0].arrayBuffer())
                let r = guzip(b)
                if (typeof (r.err) != "undefined") {
                    load.value = "";
                    errmsg.value = r.err;
                    return
                }
                let blob = new Blob([r], {
                    type: "application/zip"
                })
                let url = URL.createObjectURL(blob)
                let adom = document.createElement("a")
                adom.href = url
                let name = f.files[0].name.replace(/\.zip$/, "")
                adom.download = name + ".utf-8.zip"
                document.body.appendChild(adom)
                adom.click()
                document.body.removeChild(adom)
                URL.revokeObjectURL(url)
                load.value = "";
            }

            return {
                file,
                fileupload,
                load,
                errmsg
            }
        },
    }).mount('#app')


</script>

</html>